<template>
    <el-dialog :title="isEdit?'编辑'+title+'清单':'新增'+title+'清单'" :visible.sync="dialogForm" width="1100px">
        <el-form :inline="true" ref="form" :model="form" :rules="rules" class="search-form" label-width="100px">
            <el-row>
                <el-col :span="8">
                    <el-form-item label="箱号：" prop="containerId">
                        <el-input v-model="form.containerId" @change="changeContainerId"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="箱型：" prop="containerType">
                        <autoSearchEntrust v-model="form.containerType" :name="form.containerType"></autoSearchEntrust>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="尺寸：" prop="containerSize">
                        <autoSearchSize v-model="form.containerSize" :name="form.containerSize"></autoSearchSize>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="空重：" prop="ef">
                        <el-select v-model="form.ef" placeholder="请选择" clearable>
                            <el-option v-for="[key, val] in _dictIfHeavyType" :key="key" :label="val" :value="key">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="铅封号：" prop="sealNo">
                        <el-input v-model="form.sealNo"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="内外贸：" prop="tradeType">
                        <el-select v-model="form.tradeType" placeholder="请选择" clearable>
                            <el-option v-for="[key, val] in _dictTradeType" :key="key" :label="val" :value="key">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="装箱方式：" prop="enchaseWay">
                        <el-select v-model="form.enchaseWay" placeholder="请选择" clearable>
                            <el-option v-for="[key, val] in _dictEnchaseWayType" :key="key" :label="val" :value="key">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="提单号：" prop="billNumber">
                        <el-input v-model="form.billNumber"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="船代：" prop="shipAgentName">
                        <auto-search-custom @selectName="v=>form.shipAgentName=v"
                                            @select="v=>form.shipAgentId=v"
                                            @selectCode="v=>form.shipAgentCode=v"
                                            :name="form.shipAgentName"
                                            :isShipAgent="true"></auto-search-custom>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="中转：" prop="change">
                        <el-select v-model="form.change" placeholder="请选择" clearable>
                            <el-option v-for="[key, val] in _dictIsChange" :key="key" :label="val" :value="key">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="货名：" prop="cargoName">
                        <el-input v-model="form.cargoName"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="件数：" prop="cargoCount">
                        <el-input v-model="form.cargoCount"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="货重：" prop="cargoWeight">
                        <el-input-number style="width: 188px" :controls="false"
                                         v-model="form.cargoWeight"></el-input-number>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="箱货重：" prop="containerWeight">
                        <el-input-number style="width: 188px" :controls="false"
                                         v-model="form.containerWeight"></el-input-number>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="货类：" prop="cargoType">
                        <el-input v-model="form.cargoType"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="箱主：" prop="containerOwnerName">
                        <autoSearchCustom @selectName="v=>form.containerOwnerName=v" :name="form.containerOwnerName"
                                          :isOwner="true"></autoSearchCustom>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="装货港：" prop="loadPort">
                        <auto-search-port-station v-model="form.loadPort" :name="form.loadPort"></auto-search-port-station>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="目的港：" prop="unloadPort">
                        <auto-search-port-station v-model="form.unloadPort" :name="form.unloadPort"></auto-search-port-station>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row v-if="title==='装船'">
                <el-col :span="8">
                    <el-form-item label="卸区：" prop="unloadArea">
                        <el-input v-model="form.unloadArea"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogForm = false">取 消</el-button>
            <el-button type="primary" @click="handleSubmit" :loading="$store.getters.loadingBtn">保 存</el-button>
        </div>
    </el-dialog>
</template>

<script>
    import autoSearchSize from '@/components/autocomplete/autoSearchSize'
    import autoSearchEntrust from "@/components/autocomplete/autoSearchEntrust";
    import autoSearchCustom from '@/components/autocomplete/autoSearchCustom'
    import autoSearchPortStation from '@/components/autocomplete/autoSearchPortStation'
    import { addShipPlanList, editShipPlanList } from "@/api/shipPlan/shipPlan";
    import { fiveLength, sortLength } from "@/utils/rules";
    import { PUBLIC_NUMBER_NULL,PUBLIC_INT_NULL_ZERO,PUBLIC_NUM_CODE } from "@/utils/Reg";
    import searchContainerOnPort from "@/components/autocomplete/autoSearchContainerOnPort";

    export default {
        name: "shipLoadForm",
        components: {
            autoSearchSize,
            autoSearchEntrust,
            autoSearchCustom,
            searchContainerOnPort,
            autoSearchPortStation
        },
        props: {
            id: ''
        },
        data() {
            return {
                isEdit: false,
                dialogForm: false,
                form: {},
                rules: {
                    containerId: [{ required: true, message: '请输入箱号!', trigger: 'change' },
                        { validator: PUBLIC_NUM_CODE, trigger: 'change' },
                        { max: 11, message: `最多输入11个字符`, trigger: 'change' }],
                    containerType: [{ required: true, message: '请选择箱型!', trigger: 'change' }],
                    containerSize: [{ required: true, message: '请选择尺寸!', trigger: 'change' }],
                    ef: [{ required: true, message: '请选择空重!', trigger: 'change' }],
                    tradeType: [{ required: true, message: '请选择内外贸!', trigger: 'change' }],
                    shipAgentName: [{ required: true, message: '请选择船代!', trigger: 'change' }],
                    containerOwnerName: [{ required: true, message: '请选择箱主!', trigger: 'change' }],
                    loadPort: [{ required: true, message: '请选择装货港!', trigger: 'change' }],
                    unloadPort: [{ required: true, message: '请选择目的港!', trigger: 'change' }],
                    sealNo: [fiveLength],
                    billNumber: [fiveLength],
                    cargoName: [fiveLength],
                    cargoType: [sortLength],
                    cargoCount: [{ validator: PUBLIC_INT_NULL_ZERO, trigger: 'change' }],
                    cargoWeight: [{ validator: PUBLIC_NUMBER_NULL, trigger: 'change' }],
                    containerWeight: [{ validator: PUBLIC_NUMBER_NULL, trigger: 'change' }],
                },
            }
        },
        methods: {
            handleSubmit() {
                this.$refs.form.validate((valid) => {
                    if (valid) {
                        if (this.isEdit) {
                            editShipPlanList(this.id, this.form).then(res => {
                                this.$message({ message: '修改成功!', type: 'success' })
                                this.dialogForm = false
                            })
                        } else {
                            addShipPlanList(this.id, this.form).then(res => {
                                this.$message({ message: '添加成功!', type: 'success' })
                                this.dialogForm = false
                            })
                        }
                    } else {
                        this.$message({ message: '请检查表单!', type: 'error' })
                    }
                })
            },
            changeContainerId(val) {
                this.form.containerId = val.toUpperCase()
            }
        },
        computed: {
            title() {
                let type = this.$route.path.indexOf('un')
                let title = '装船'
                if (type > -1) {
                    title = '卸船'
                }
                return title
            }
        },
        watch: {
            dialogForm(bool) {
                if (!bool) {
                    this.$parent.dialogForm = false
                    this.$emit('load')
                }
            }
        }
    }
</script>

<style scoped>

</style>
